<template>
  <div>
    <!-- 触发按钮 -->
    <wd-button type="primary" @click="openDialog">打开对话框</wd-button>
    <wd-button type="success" @click="openConfirmDialog">打开确认对话框</wd-button>
    <wd-button type="warning" @click="openFormDialog">打开表单对话框</wd-button>

    <!-- 基础对话框 -->
    <wd-popup v-model="basicDialog.visible" :title="basicDialog.title" position="center" closable>
      <view class="dialog-content">
        <text>这是一个基础对话框示例</text>
      </view>
      <template #footer>
        <wd-button @click="closeBasicDialog">关闭</wd-button>
      </template>
    </wd-popup>

    <!-- 确认对话框 -->
    <wd-popup v-model="confirmDialog.visible" :title="confirmDialog.title" position="center" closable>
      <view class="dialog-content">
        <text>确定要执行此操作吗？</text>
      </view>
      <template #footer>
        <wd-button @click="closeConfirmDialog">取消</wd-button>
        <wd-button type="primary" @click="handleConfirm">确定</wd-button>
      </template>
    </wd-popup>

    <!-- 表单对话框 -->
    <wd-popup v-model="formDialog.visible" :title="formDialog.title" position="center" closable>
      <view class="dialog-content">
        <wd-input v-model="formData.name" placeholder="请输入姓名" />
        <wd-input v-model="formData.email" placeholder="请输入邮箱" />
      </view>
      <template #footer>
        <wd-button @click="closeFormDialog">取消</wd-button>
        <wd-button type="primary" @click="handleSubmit">提交</wd-button>
      </template>
    </wd-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 方式1: 直接使用全局类型 DialogOption
const basicDialog = ref<DialogOption>({
  title: '基础对话框',
  visible: false
})

// 方式2: 扩展 DialogOption 类型
interface ExtendedDialogOption extends DialogOption {
  width?: string
  height?: string
  confirmText?: string
  cancelText?: string
}

const confirmDialog = ref<ExtendedDialogOption>({
  title: '确认对话框',
  visible: false,
  width: '400px',
  confirmText: '确定',
  cancelText: '取消'
})

// 方式3: 创建自定义对话框配置
interface FormDialogOption extends DialogOption {
  loading?: boolean
  submitText?: string
}

const formDialog = ref<FormDialogOption>({
  title: '表单对话框',
  visible: false,
  loading: false,
  submitText: '提交'
})

// 表单数据
const formData = reactive({
  name: '',
  email: ''
})

// 方法示例
const openDialog = () => {
  basicDialog.value.visible = true
}

const closeBasicDialog = () => {
  basicDialog.value.visible = false
}

const openConfirmDialog = () => {
  confirmDialog.value.visible = true
}

const closeConfirmDialog = () => {
  confirmDialog.value.visible = false
}

const handleConfirm = () => {
  console.log('用户确认操作')
  closeConfirmDialog()
}

const openFormDialog = () => {
  formDialog.value.visible = true
}

const closeFormDialog = () => {
  formDialog.value.visible = false
  // 重置表单
  formData.name = ''
  formData.email = ''
}

const handleSubmit = () => {
  console.log('提交表单数据:', formData)
  closeFormDialog()
}

// 方式4: 创建对话框管理函数
const createDialog = (title: string): DialogOption => {
  return {
    title,
    visible: false
  }
}

// 使用函数创建对话框
const dynamicDialog = ref<DialogOption>(createDialog('动态对话框'))

// 方式5: 对话框数组管理
const dialogList = ref<DialogOption[]>([
  { title: '对话框1', visible: false },
  { title: '对话框2', visible: false },
  { title: '对话框3', visible: false }
])

// 批量操作对话框
const openAllDialogs = () => {
  dialogList.value.forEach(dialog => {
    dialog.visible = true
  })
}

const closeAllDialogs = () => {
  dialogList.value.forEach(dialog => {
    dialog.visible = false
  })
}

// 导出给父组件使用
defineExpose({
  openDialog,
  closeBasicDialog,
  basicDialog
})
</script>

<style lang="scss" scoped>
.dialog-content {
  padding: 20px;
  text-align: center;
  
  .wd-input {
    margin-bottom: 15px;
  }
}
</style>
